<template>
    <div class="orderDetail container">
        <header>
            <van-nav-bar title="订单详情" left-arrow @click-left="$router.back()" />
        </header>
        <section>
            <div class="step-card">
                <van-steps :active="active" active-icon="success" inactive-icon="arrow" active-color="#1b1b1b">
                    <van-step>待支付</van-step>
                    <van-step>待发货</van-step>
                    <van-step>待确认</van-step>
                    <van-step>已完成</van-step>
                </van-steps>
            </div>
            <div class="goods-card">
                <span class="ddid">订单号：{{ orders.order_id }}</span>
                <van-card :price="orders.goodsPrice" :title="orders.goodsName" :thumb="orders.goodsImgUrl"
                    :num="orders.goodsNum">
                    <template #footer>
                        <span>{{orders.order_now}}</span>
                    </template>
                </van-card>
            </div>
            <div class="other-card">
                <ul>
                    <li>
                        <b>配送方式与价格</b>
                        <p>{{orders.express}} 免费</p>
                    </li>
                    <li>
                        <b>礼品包装</b>
                        <p>精致礼盒包装 附赠空白礼品卡片</p>
                    </li>
                    <li>
                        <b>支付方式</b>
                        <img class="zfb-img" src="/images/zfb.png" alt=""><p class="zfb-title">支付宝支付 个人发票</p>
                    </li>
                </ul>
            </div>
        </section>
        <Tabbar></Tabbar>
    </div>

</template>

<script>
import http from '@/common/api/request.js'
import Tabbar from '@/components/common/Tabbar.vue';
export default {
    data() {
        return {
            orders: {},
            active: 0
        };
    },
    created() {
        this.getData();
    },
    methods: {
        async getData() {
            let id = this.$route.params.id
            let res = await http.$axios({
                url: '/api/OrderDetail',
                params: {
                    id
                }
            })
            this.orders = res

            this.$nextTick(()=>{
                if(this.orders.order_status <= 2) {
                this.active = 0
            } else if(this.orders.order_status ==3 ){
                this.active = 1
            } else if (this.orders.order_status >= 4 && this.orders.order_status <= 6) {
                this.active = 2
            } else {
                this.active = 3
            }
            })
        }
    },
    components: { Tabbar }
}
</script>

<style scoped>
header {
    width: 100%;
    height: 1.473333rem;

}

::v-deep .van-steps {
    margin-top: 40px;
    margin-bottom: 40px;
}



::v-deep .van-step__title {
    font-size: 17px;
}

::v-deep .van-step__title--active {
    font-weight: 550;
}

::v-deep .van-step__line {
    margin-top: 10px;
}

::v-deep .van-step__icon {
    font-size: 18px;
}

::v-deep .van-step__circle-container {
    margin-top: 10px;
}

::v-deep .van-nav-bar__content {
    background-color: #fff;
}

::v-deep .van-nav-bar__title {
    color: #1b1b1b;
    font-size: 18px;
}

::v-deep .van-nav-bar .van-icon {
    color: #1b1b1b;
    font-size: 0.593333rem;
}

.step-card::after {
    content: '';
    width: 95%;
    display: block;
    margin: 0 auto;
    border-bottom: 1px solid #ccc;
}

::v-deep .van-card {
    margin-bottom: 40px;
}

.ddid {
    display: inline-block;
    margin-top: 40px;
    padding-left: 0.533333rem;
    font-size: 0.32rem;
}

::v-deep .van-card__price-integer {
    font-size: 20px;
}

::v-deep .van-card__title {
    font-size: 14px;
    font-weight: 550;
}

::v-deep .van-card__num {
    font-size: 16px;
}

.other-card ul li {
    margin-top: 40px;
}

.other-card ul li::before {
    content: '';
    width: 95%;
    display: block;
    margin: 0 auto;
    border-bottom: 1px solid #ccc;
}


.other-card ul li b {
    font-size: 16px;
    padding-left: 0.533333rem;
}
.other-card ul li p {
    font-size: 16px;
    padding-left: 0.533333rem;
    margin-top: 5px;
    color: #969799;
}

/* .take-button {
    height: 100%;
    background-color: #ccc;
    border: 1px solid #ccc;
}

.delete-button {
    height: 100%;
    background-color: #ccc;
    border: 1px solid #ccc;
} */

.paystatus {
    font-size: 18px;
}

/* ::v-deep .van-popup .van-popup--top .van-notify .van-notify--danger {
    height: 1.473333rem;
    font-size: 18px;
}

::v-deep .van-popup--center {
    width: 150px;
    height: 45px;
    background-color: #ccc;
    text-align: center;
    align-items: center;
    line-height: 45px;
} */

::v-deep .van-step--finish {
    color: #969799;
}

.zfb-title {
    margin-left: 32px;
}

.zfb-img {
    position: relative;
    left:-1.73333rem;
    top:40px;
}
</style>